<template>
  <!-- 添加或修改订单基础信息管理对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body :close-on-click-modal="false" v-dialogDrag>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-tabs v-model="activeName" class="detail-tab" type="card">
        <el-tab-pane label="基本信息" name="first">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="所属框架" prop="projectId">
                <el-select v-model="form.projectId" placeholder="请选择框架" filterable clearable style="width: 100%">
                  <el-option v-for="item in projectOptions" :key="item.id" :label="item.code" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="订单编号" prop="code">
                <el-input v-model="form.code" placeholder="请输入订单编号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单签订日期" prop="contractDate">
                <el-date-picker clearable v-model="form.contractDate" type="date" value-format="yyyy-MM-dd"
                  placeholder="请选择签约日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地区" prop="area">
                <el-select v-model="form.area" placeholder="请选择地区" filterable clearable>
                  <el-option v-for="dict in dict.type.order_area" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="业务员" prop="salesmanId">
                <el-select v-model="form.salesmanId" placeholder="请选择业务员" filterable clearable style="width: 100%">
                  <el-option v-for="item in salesmanList" :key="item.userId" :label="item.nickName"
                    :value="item.userId" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="制单人" prop="createName">
                <el-input v-model="form.createName" placeholder="请输入制单人" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="买方" prop="customId">
                <el-select v-model="form.customId" placeholder="请选择买方" filterable @change="selectCustomerForPrj"
                  clearable style="width: 100%">
                  <el-option v-for="dict in dict.type.goods_customer" :data="dict.raw" ref="myselectCustomerForPrj"
                    :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="买方开票编码" prop="taxcode">
                <el-input v-model="form.taxcode" placeholder="请输入开票单位编码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目单位" prop="companyName">
                <el-input v-model="form.companyName" placeholder="请输入项目单位" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="合同金额" prop="contractMoney">
                <el-input-number :precision="2" v-model="form.contractMoney" placeholder="请输入订单金额"
                  @change="updateAuditMoney" />
                元
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="开票日期" prop="invoicingTime">
                <el-date-picker clearable v-model="form.invoicingTime" type="date" value-format="yyyy-MM-dd"
                  placeholder="请选择开票日期">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="回款日期" prop="endDate">
                <el-date-picker clearable v-model="form.endDate" type="date" value-format="yyyy-MM-dd"
                  placeholder="请选择回款日期">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="合同交货时间" prop="deliveryTime">
                <el-date-picker clearable v-model="form.deliveryTime" type="date" value-format="yyyy-MM-dd"
                  placeholder="请选择合同交货时间">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="下单日期" prop="orderDate">
                <el-date-picker clearable v-model="form.orderDate" type="date" value-format="yyyy-MM-dd"
                  placeholder="请选择下单日期">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="回款状态" prop="fundCallback">
                <el-select v-model="form.fundCallback" placeholder="回款状态" clearable style="width: 100%">
                  <el-option v-for="dict in dict.type.invoice_back_status" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开票状态" prop="checkState">
                <el-select v-model="form.taxStatus" placeholder="开票状态" clearable style="width: 100%">
                  <el-option v-for="dict in dict.type.tax_status" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="订单类别" prop="goodsType">
                <el-radio-group v-model="form.goodsType">
                  <el-radio v-for="dict in dict.type.order_goods_type" :key="dict.value"
                    :label="dict.value">{{dict.label}}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发货地址" prop="addr">
                <el-input v-model="form.addr" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注信息" prop="information">
                <el-input v-model="form.information" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="附件" prop="attachment">
                <file-upload v-model="form.attachment" />
              </el-form-item>
            </el-col>


          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getAction,
    addAction,
    getById,
    updateAction
  } from '@/api/manage'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {
    treeselect
  } from "@/api/system/dept";
  import {
    parseTime
  } from "@/utils/common";

  export default {
    name: "ProjectBaseInfoForm",
    dicts: ['goods_customer', 'company', 'invoice_back_status', 'tax_status', 'order_goods_type', 'order_area', 'yewu_type'],
    components: {
      Treeselect,
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        activeName: "first",
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        salesmanList: [],
        // 表单校验
        rules: {
          projectId: [{
            required: true,
            message: "请选择所属项目",
            trigger: "blur"
          }],
          code: [{
            required: true,
            message: "订单编号不能为空",
            trigger: "blur"
          }, ],
          year: [{
            required: true,
            message: "所属年度不能为空",
            trigger: "blur"
          }],
          deptId: [{
            required: true,
            message: "所属部门不能为空",
            trigger: "blur"
          }],
          name: [{
            required: true,
            message: "订单名称不能为空",
            trigger: "blur"
          }],
          salesmanId: [{
            required: true,
            message: "请选择业务员",
            trigger: "blur"
          }],
          customId: [{
            required: true,
            message: "买方不能为空",
            trigger: "blur"
          }],
          companyId: [{
            required: true,
            message: "项目单位不能为空",
            trigger: "blur"
          }],
          goodsType: [{
            required: true,
            message: "请选择订单类别",
            trigger: "blur"
          }],
          createName: [{
            required: true,
            message: "制单人不能为空",
            trigger: "blur"
          }],
          area: [{
            required: true,
            message: "地区不能为空",
            trigger: "blur"
          }],
          orderDate: [{
            required: true,
            message: "下单日期不能为空",
            trigger: "blur"
          }],
          contractDate: [{
            required: true,
            message: "下单日期不能为空",
            trigger: "blur"
          }],
        },
        url: {
          getById: '/projectBaseInfo/projectBaseInfo/',
          add: '/projectBaseInfo/projectBaseInfo/add',
          edit: '/projectBaseInfo/projectBaseInfo/edit',
          projectList: '/project/project/list',
          checkCodeUnique: '/projectBaseInfo/projectBaseInfo/checkCodeUnique/',
          salesmanList: '/system/role/authUser/allocatedList',
        },
        deptOptions: [],
        projectOptions: [],
      };
    },
    created() {
      this.getTreeselect();
      this.getProjectOptions();
      this.getSalesmanList();
    },
    methods: {
      selectDept(e) {
        let that = this;
        that.$set(that.form, "deptName", e.label);
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },

      getProjectOptions() {
        let params = {
          "pageSizeZero": true
        };
        getAction(this.url.projectList, params).then(response => {
          this.projectOptions = response.rows;
        });
      },

      updateAuditMoney(value) {
        this.$set(this.form, "auditMoney", value);
      },
      selectCustomerForPrj(value) {
        let that = this;
        let arr = that.$refs.myselectCustomerForPrj;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].currentValue == value) {
            that.form.taxcode = arr[i].$attrs.data.dictType;
          }
        }
        console.log(arr);
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          name: null,
          customId: null,
          customName: null,
          customSimple: null,
          companyName: null,
          contractDate: null,
          invoicingTime: null,
          contractMoney: null,
          auditMoney: null,
          deliveryTime: null,
          checkDate: null,
          fundCallback: "0",
          feeMoney: "0",
          saleMoney: "0",
          profitMoney: "0",
          information: null,
          salesmanId: null,
          salesmanName: null,
          createName: this.$store.getters.nickName,
          year: Number(new Date().getFullYear()),
          orderDate: null,
        };
        this.resetForm("form");
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.form.orderDate = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}');
        this.title = "添加订单基础信息";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids;
        getById(this.url.getById, id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改订单基础信息";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateAction(this.url.edit, this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.$emit('ok');
                this.$parent.getList()
              });
            } else {
              addAction(this.url.add, this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.$emit('ok');
                this.$parent.getList()
              });
            }
          }
        });
      },

      checkCodeUnique(rule, code, callback) {
        if (code == null) {
          callback(new Error("项目编号不能为空"));
        }
        getAction(this.url.checkCodeUnique + code, {}).then(response => {
          if (!response.data) {
            callback(new Error("订单编号已存在"));
          } else {
            callback();
          }
        });
      },

      getSalesmanList() {
        getAction(this.url.salesmanList, {
          "roleId": "e1c2bca31b7944e98f79008c726cf7e8"
        }).then(response => {
          this.salesmanList = response.rows;
        });
      }








    }
  };
</script>
